<template>
  <div class="register">
    <div class="title">{{title}}</div>
    <el-form ref="form" :model="formData" :rules="rules" label-width="120px">
      <el-form-item label="工程名称" prop="projectName">
        <el-input v-model="formData.projectName" placeholder="请填写项目名称" />
      </el-form-item>
      <el-form-item label="作业名称" prop="sequence">
        <el-select
          v-model="formData.sequence"
          multiple
          filterable
          allow-create
          placeholder="请选择作业名称"
          @change="onSelectChange"
        >
          <el-option
            v-for="(item, index) in sequenceList"
            :key="index"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-row>
        <el-col :span="16">
          <el-form-item label="工程编号" prop="code">
            <el-input v-model="formData.code" placeholder="请填写项目编码" :disabled="projectId" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex">
        <el-col :span="10">
          <el-form-item label="单根长度" prop="len">
            <el-input
              type="number"
              v-model="formData.len"
              placeholder="单根钻杆长度"
            />
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="钻杆规格" prop="innerRadius">
            <el-input
              v-model="formData.innerRadius"
              placeholder="钻杆规格"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="10">
          <el-form-item label="钻杆总数量" prop="total">
            <el-input-number v-model="formData.total" :min="1" :max="1000" :step="1" />
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="铺设管径" prop="outerRadius">
            <el-input v-model="formData.outerRadius" placeholder="铺设管径" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="工程地点" prop="location">
        <el-input v-model="formData.location" placeholder="请填写作业地点" />
      </el-form-item>
      <el-form-item label="地质描述" prop="geology">
        <el-input
          v-model="formData.geology"
          placeholder="请填写工程地质信息"
        />
      </el-form-item>
      <!-- <el-form-item label="操作人">
        <el-select v-model="formData.operator">
          <el-option
            v-for="item in operators"
            :key="item.workerId"
            :label="item.name"
            :value="item.workerId"
          />
        </el-select>
      </el-form-item> -->
      <el-form-item>
        <el-button type="plain" @click="cancel">取消</el-button>
        <el-button type="primary" @click="createProject"
          >{{btnText}}</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      formData: {
        projectName: '', // 项目名称
        code: '', // 项目编码
        location: '', // 项目位置信息描述
        sequence: [], // 作业名称
        // operator: '', // 操作人员
        len: 9.7, // 钻杆单根长度
        total: 500, // 钻杆总数
        innerRadius: 10, // 钻杆规格
        outerRadius: 100, // 铺设管径
        geology: '' // 地址信息
      },

      rules: {
        projectName: [{ required: true, message: '请输入工程名称' }],
        code: [{ required: true, message: '请输入工程编码' }],
        sequence: [{ required: true, message: '请添加作业名称信息' }],
        len: [{ required: true, message: '请填写单根钻杆长度' }],
        total: [{ required: true, message: '请填写项目总钻杆数' }]
      },

      sequenceList: ['导向', '扩孔550', '扩孔850', '扩孔1050', '扩孔1250'],
      title: '新增项目信息',
      btnText: '注册项目信息',
      projectId: ''
    }
  },

  computed: {
    ...mapState(['operators', 'projectList'])
    // operators () {
    //   return this.$store.state.operators
    // },
  },

  created () {
    this.$store.dispatch('getOperators')
    this.getProjectDetail()
  },

  methods: {
    onSelectChange (options) {
      this.formData.sequence = options
    },
    // 获取项目信息
    getProjectDetail () {
      const { projectId } = this.$route.query
      this.projectId = projectId
      if (projectId) {
        this.title = '编辑项目信息'
        this.btnText = '更新项目信息'
        const project = this.projectList.find(item => item.projectId === projectId)
        for (const key in project) {
          if (key === 'projectId') {
            this.formData.code = project[key]
          } else if (key === 'address') {
            this.formData.location = project[key]
          } else {
            this.formData[key] = project[key]
          }
        }
      }
    },

    // 创建项目信息
    createProject () {
      this.$refs.form.validate((a, b) => {
        if (a) {
          const data = this.formData
          console.log(data, 'data----')
          const { projectId } = this.$route.query
          const action = projectId ? 'updateProject' : 'createProject'
          this.$store.dispatch(action, data).then((res) => {
            this.$store.dispatch('getProjectList')
            if (res.success) {
              this.$refs.form.resetFields()
              this.$refs.form.clearValidate()
              this.$message({
                type: 'success',
                message: projectId ? '项目信息更新成功!' : '项目信息创建成功!',
                showClose: true
              })
              this.$router.go(-1)
            } else {
              this.$message({
                type: 'warning',
                message: '项目已存在，请勿重复创建',
                showClose: true
              })
            }
          })
        }
      })
    },

    // 取消
    cancel () {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss">
.register {
  // display: flex;
  // align-items: center;
  // justify-content: center;
  padding-top: 2.5rem;
  height: 100%;
  background-color: rgba($color: #4253e9, $alpha: 0.6);

  .title{
    font-size: 2rem;
    color: #fff;
  }

  .el-form {
    margin: 0 auto;
    margin-top: 1.875rem;
    width: 58%;
    padding: 2rem;
    border-radius: 1rem;
    background-color: #fff;

    .el-form-item__content {
      display: flex;
      justify-content: flex-start;
      text-align: left;
    }
    .el-select {
      width: 100%;
    }
  }
}
</style>
